<template>
  <div class="flex-1 h-full card_class">
    <div class="card_title">
      <span>{{ title }}</span>
      <div v-if="!isDarkMode(routeName)">
        <el-select
          v-model="searchParam.year"
          placeholder="请选择"
          filterable
          :suffixIcon="() => '年'"
          class="w-[70px] mr-[10px]"
          size="small"
          @change="handleSearch"
        >
          <el-option
            v-for="item in useDictionary('YearList')"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="searchParam.month"
          placeholder="请选择"
          filterable
          clearable
          :suffixIcon="() => '月'"
          class="w-[50px]"
          :class="!panelSetIcon ? 'mr-[20px]' : ''"
          size="small"
          @change="handleSearch"
        >
          <el-option
            v-for="item in useDictionary('MonthList')"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="echarts" style="height: calc(100% - 50px)">
      <ECharts
        v-if="option"
        :option="option"
        :id="`QmsWeightProcess` + props.id"
        ref="chart"
      />
    </div>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import {
  qmsWeightProcessList,
  qmsWeightProcessOtherList,
} from "@/assets/js/qms.ts";
import * as echarts from "echarts";
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url, title } = toRefs(props);

const rich: any = {
  name: {
    color: "#666",
    fontSize: 13,
    // padding: [8, 30, 0, 30],
    fontWeight: "600",
    align: "left",
  },
  value: {
    color: "#333",
    fontSize: 14,
    padding: [0, 30, 8, 30],
    fontWeight: "500",
    align: "left",
  },
  percent: {
    color: "#FFF",
    align: "right",
    fontSize: 14,
    fontWeight: "400",
    //padding: [0, 5]
  },
};
//职称结构图表
const colorList = [
  "#006DFB",
  "#18dcff",
  "#313ca9",
  "#B4EC51",
  "#7d5fff",
  "#FFBC6D",
  "#51D9A2",
  "#f9e264",
  "#f47a75",
  "grey",
  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    {
      offset: 0,
      color: "#04B9BD",
    },
    {
      offset: 1,
      color: "#76F2F8",
    },
  ]),
  "#765025",
];
const colorList1 = [
  "#bf19ff",
  "#854cff",
  "#5f45ff",
  "#02cdff",
  "#314976",
  "#f9e264",
  "#f47a75",
  "#009db2",
  "#024b51- 0780cf",
  "#765005",
];

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const reportData = ref();
const reportDataOther = ref();

const searchParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

const searchedParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

async function handleSearch() {
  reportData.value = null;
  reportDataOther.value = null;
  loading.value = true;
  Object.assign(searchedParam, searchParam);
  //   const { data } = await request({
  //     url: `/eam/equStatistics/queryEamRepairOrderList`,
  //     method: "post",
  //     data: {
  //       statisticsYear: searchParam.year,
  //       statisticsMoon: searchParam.month,
  //     },
  //   }).finally(() => {
  //     loading.value = false;
  //   });
  //   reportData.value = data;

  reportData.value = qmsWeightProcessList;
  reportDataOther.value = qmsWeightProcessOtherList;
  xAxisOther.value = [];
  yAxisOther.value = [];
  xAxis.value = [];
  yAxis.value = [];
  setOptions();
}

const option = ref();
const xAxis = ref<string[]>([]);
const yAxis = ref<number[]>([]);
const xAxisOther = ref<string[]>([]);
const yAxisOther = ref<number[]>([]);
const chart = ref();
function setOptions() {
  const rawData = reportData.value;
  // 对数据进行降序排序
  rawData.sort((a, b) => b.value - a.value);

  rawData?.map((e: any, index) => {
    xAxis.value = [...xAxis.value, e.name];
    yAxis.value = [...yAxis.value, e.value];
  });

  const rawDataOther = reportDataOther.value;
  // 对数据进行降序排序
  rawDataOther.sort((a, b) => a.value - b.value);

  rawDataOther?.map((e: any, index) => {
    xAxisOther.value = [...xAxisOther.value, e.name];
    yAxisOther.value = [...yAxisOther.value, e.value];
  });

  option.value = {
    color: colorList,
    darkMode: true,
    layout: "none",
    animation: true, //控制动画示否开启
    animationDuration: 3000,
    animationEasing: "bounceOut", //缓动动画
    animationThreshold: 8, //动画元素的阈值
    backgroundColor: "transparent", // 给echarts图设置背景色
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.5)",
      textStyle: {
        color: "#fff",
        fontFamily: "DINLight",
        fontSize: 14,
      },
    },
    // grid: {
    //   left: "3%", //图表距边框的距离
    //   right: "3%",
    //   top: "14%",
    //   bottom: "7%",
    //   containLabel: true,
    // },
    grid: {
      right: "5%",
      top: "15%",
      bottom: "0%",
      width: "25%",
      height: "65%",
    },
    title: [
      {
        text: "其他工序统计",
        x: "73%",
        y: "2%",
        textAlign: "center",
        textStyle: {
          fontSize: 16,
          color: isDarkMode(routeName) ? "rgb(255,255,255)" : "#333",
        },
      },
    ],
    // xAxis: [
    //   {
    //     data: xAxisOther.value,
    //   },
    // ],
    xAxis: [
      {
        type: "value",
        name: "",
        // data: props.params.xdata,
        axisLine: {
          lineStyle: {
            color: "rgba(0,0,0,0.12)",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: isDarkMode(routeName)
              ? "rgba(255,255,255,.1)"
              : "rgba(0,0,0,.1)",
            type: "dashed",
          },
        },
        axisLabel: {
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: 12,
          formatter: function (value) {
            return value; // 这里的 '单位' 是你想要添加的后缀
          },
        },
        axisTick: {
          //坐标轴刻度颜色  x和y不交叉
          show: true,
        },
      },
    ],
    // {
    //   type: "value",
    //   scale: true,
    //   position: "top",
    //   boundaryGap: false,
    //   splitLine: {
    //     show: false,
    //   },
    //   axisLine: {
    //     show: true,
    //     lineStyle: {
    //       color: "#455B77",
    //     },
    //   },
    //   axisTick: {
    //     show: false,
    //   },
    //   axisLabel: {
    //     margin: 2,
    //     textStyle: {
    //       color: "#c0e6f9",
    //     },
    //   },
    // }
    yAxis: [
      {
        type: "category",
        name: "",
        axisLabel: {
          //   formatter: "{value}",
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: 12,
          //   fontFamily: "DINLight",
        },
        splitLine: {
          lineStyle: {
            color: "rgba(0,0,0,0.12)",
            type: "dashed",
          },
        },
        data: xAxisOther.value,
      },
    ],
    // {
    //   type: "category",
    //   nameGap: 16,
    //   axisLine: {
    //     show: true,
    //     lineStyle: {
    //       color: "#455B77",
    //     },
    //   },
    //   axisTick: {
    //     show: false,
    //   },
    //   axisLabel: {
    //     interval: 0,
    //     textStyle: {
    //       color: "#c0e6f9",
    //     },
    //   },
    //   data: xAxisOther.value,
    // }
    series: [
      {
        itemStyle: {
          color: function (params) {
            return colorList[params?.dataIndex];
          },
        },
        type: "pie",
        radius: ["0%", "60%"],
        center: ["30%", "48%"],
        label: {
          show: true,
          position: "outside",
          // formatter: "{name|{b}}，{d}%",
          formatter: "{b}\n{d}%",
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: isDarkMode(routeName) ? 13 : 12,
          lineHeight: 16,
          rich: rich,
        },
        labelLine: {
          length: 20,
          length2: 10,
          lineStyle: {
            width: 1,
          },
        },
        data: reportData.value,
      },
      {
        itemStyle: {
          color: isDarkMode(routeName) ? "" : "#F2F9F7",
          opacity: "0.3",
          // color: "#F2F9F7",
        },
        type: "pie",
        silent: true, // 取消高亮
        radius: ["0%", "68%"],
        center: ["30%", "48%"],
        data: reportData.value,
        label: {
          show: true,
          position: "inner",
          formatter: (params: any) => {
            return "{percent|" + params.percent.toFixed(0) + "%}";
          },
          rich: rich,
        },
        z: -1,
      },
      {
        type: "bar",
        name: "",
        // barGap: "-100%",
        // barCategoryGap: "60%",
        // itemStyle: {
        //   color: "rgb(36,120,242)",
        //   emphasis: {
        //     show: false,
        //   },
        // },
        itemStyle: {
          color: "orange",
          // color: "rgb(118,133,255)",
        },
        center: ["55%", "20%"],
        axisLine: {
          lineStyle: {
            color: "rgba(0,0,0,0.2)",
          },
        },
        axisLabel: {
          color: "#666",
          fontSize: 12,
          formatter: function (value) {
            return xUnit.value ? value + xUnit.value : value; // 这里的 '单位' 是你想要添加的后缀
          },
        },
        axisTick: {
          //坐标轴刻度颜色  x和y不交叉
          show: true,
        },
        data: yAxisOther.value,
      },
    ],
  };
}

const loading = ref(false);
onMounted(() => {
  handleSearch();
});
</script>

<style lang="scss" scoped>
.card_class {
  background-color: var(--el-bg-color-overlay);
  border-radius: 4px;
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  .card_title {
    white-space: nowrap;
    font-size: 20px;
    color: #333;
    font-family: YOUSHE;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
